<template>
  <view class="search-detail-container">
    <!-- #ifdef MP -->
    <navbar :title="appName" mode="{}"></navbar>
    <view class="mp-search-input-container flex-row align-center">
      <image src="/static/search/sousuo.png" mode="widthFix" class="search-icon"></image>
      <input type="text" v-model="searchKWs" class="search-input" placeholder="输入关键词"
             placeholder-style="color:#7D7D7D;font-size:28upx;"
             confirm-type="search"
             @click="toSearch(keyWords)"
             focus="true"/>
      <image v-if="keyWords.length"
             src="/static/quxiao_input@3x.png" mode="widthFix" class="clear-icon"
             @click="toBack"></image>
      <view class="search-btn center" @click="toSearch(keyWords)">
        搜索
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP -->
    <view style="background-color: white;padding-bottom:30upx">
      <view class="status-contents flex-row"
            :style="{paddingTop: topBar.statusBarHeight+'px', height: topBar.navbarHeight+'px'}">
        <image src="../../static/black_back.png" mode="widthFix" class="back" @click="toBack"></image>
        <view class="search-input-container flex-row align-center">
          <image src="/static/search/sousuo.png" mode="widthFix" class="search-icon"></image>
          <input type="text" v-model="searchKWs" class="search-input" placeholder="输入关键词"
                 placeholder-style="color:#727272;font-size:14px"
                 :focus="focus"
                 @click="toSearch(keyWords)"
                 confirm-type="search"
                 @focus="inputFocus"
                 @blur="inputBlur"/>
          <image v-if="keyWords.length"
                 src="/static/quxiao_input@3x.png" mode="widthFix" class="clear-icon"
                 @click="toBack"
          ></image>
        </view>

        <view class="cancel-btn center" @click="toSearch(keyWords)">
          <text class="cancel-btn-title">搜索</text>
        </view>
      </view>
    </view>
    <!-- #endif -->

    <view class="relate-container" :style="{top: topBar.height+'px'}" v-if="isFocus">
      <template v-for="item in relate">
        <view @click="toSearch(item.content)" :key="item.content" class="row">
          <image src="@/static/sousuoItem.png"
                 style="margin-top: 27upx;width: 26upx;height: 26upx;margin-right: 8upx"></image>
          <rich-text :nodes="item.htmlContent"></rich-text>
        </view>
      </template>
    </view>

    <view v-if="list && list.length > 0" class="results-container">
      <view v-for="(section,sectionIndex) in list" :key="sectionIndex">
        <text class="section-title" style="margin-left: 46upx">{{ section.title }}</text>
        <view class="section-container">
          <view class="item-container" v-for="(item,index) in section.questions" :key="item.id" @click="toDetail(item)">
            <text class="tag">{{ item.option3 ? '单选' : '判断' }}</text>
            <KeywordText :content="item.title" :keywords="keyWords"></KeywordText>
            <view v-for="option in item.optionArray" :key="option.key">
              <KeywordText :content="option.str"
                           :keywords="keyWords"
                           textCommonStyle="color: #4C4C4C;"></KeywordText>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="flex-row justify-center" style="margin-top: 200upx;">
      <image src="http://down.qwdata.vip/app_icon/1672897905351" style="width: 254upx;height: 310upx;"></image>
    </view>


  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import {searchApi} from "@/api.js";
import KeywordText from "../../components/KeywordText";
import navbar from "../../components/navbar";
import Storage from "@/libs/Storage";

export default {
  components: {KeywordText, navbar},
  data() {
    return {
      list: [],
      last: [],
      relate: [],
      searchKWs: null,
      keyWords: '',
      focus: false,
      isFocus: false,
    }
  },
  watch: {
    async searchKWs(val) {
      this.keyWords = val
      const res = await searchApi.searchRelate(val)
      let arr = res.data.data.list
      arr.forEach((item, index) => {
        if (item.content.indexOf(val) != -1) {
          item.htmlContent = item.content.replace(val, "<span style='color:#969696'>" + val + "</span>")
        }
      })
      this.relate = arr
    },

  },
  onLoad({kws}) {
    this.searchKWs = kws
    Storage.get('search').then(last => {
      this.last = last || []
    })

    searchApi.list(kws).then(res => {
      this.list = this.listReset(res.data.data.list);
    });

  },
  computed: {
    ...mapGetters(['topBar', 'appName']),

  },
  methods: {
    toBack() {
      uni.navigateBack()
    },
    async toSearch(kws) {
      console.log('toSearch', kws)
      this.focus = false;
      if (!kws.length) {
        return
      }
      const last = [...this.last]
      const i = last.findIndex(item => item === kws)
      if (i > -1) {
        last.splice(i, 1)
      }
      last.splice(0, 0, kws)
      Storage.set('search', last)
      this.last = last
      this.relate = [];
      const res = await searchApi.list(kws);
      this.list = this.listReset(res.data.data.list);
      this.isFocus = false;
    },
    listReset(arr) {
      arr.forEach((section, sectionIndex) => {
        section.questions.forEach((item, index) => {
          let optionArray = [];
          for (let i = 1; i < 5; i++) {
            let str = item['option' + i];
            if (str && str.indexOf(this.keyWords) !== -1) {
              let sort = '';
              if (i === 1) {
                sort = '(A)'
              } else if (i === 2) {
                sort = '(B)'
              } else if (i === 3) {
                sort = '(C)'
              } else if (i === 4) {
                sort = '(D)'
              }
              // str = '选项：'+sort+str.replace(this.keyWords,"<span style='color:#FF5D40'>"+this.keyWords+"</span>")
              str = '选项：' + sort + str

              optionArray.push({
                key: i + 99,
                str
              });
            }
          }
          item.optionArray = optionArray;
        })
      })
      return arr;
    },

    toDetail(item) {
      uni.navigateTo({
        url: '/pages/detail/detail?type=search&title=详情&list=' + encodeURIComponent(JSON.stringify([{id: item.id}])),
      })
    },
    inputFocus() {
      console.log('获取焦点')
      this.isFocus = true;
    },
    inputBlur() {
      console.log('失去焦点')
      // this.isFocus = false;
    },
  }
}
</script>

<style lang="scss">
.search-detail-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: #f6f6f6;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  .back {
    width: 36upx;
    height: 36upx;
    margin-left: 30upx;
    margin-right: 16upx;
    align-self: center;
  }

  .search-input-container {
    flex: 1;
    height: 76upx;
    margin: 0 36upx 0 0upx;
    background-color: rgba(241, 241, 241, 1);
    border-radius: 38upx;
    display: flex;
    align-self: center;

    .search-icon {
      width: 32upx;
      height: 32upx;
      margin-left: 30upx;
      margin-right: 16upx;
    }

    .clear-icon {
      width: 32upx;
      height: 32upx;
      margin-right: 32upx;
    }

    .search-input {
      color: #4B4F50;
      font-size: 28upx;
      flex: 1;
    }
  }

  .cancel-btn {
    margin-right: 40upx;

    .cancel-btn-title {
      color: #4f4f4f;
      font-size: 30upx;
      text-align: center;
      font-weight: bold;
    }
  }

  .relate-container {
    position: fixed;
    overflow-x: hidden;
    overflow-y: scroll;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 44upx;
    background-color: #fff;

    .row {
      display: flex;
      line-height: 78upx;
      padding: 0 30upx;
    }
  }

  .results-container {
    display: flex;
    overflow-x: hidden;
    overflow-y: scroll;
    flex-direction: column;
    margin-top: 36upx;

    .section-title {
      font-size: 40upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4F4F4F;
      line-height: 56upx;
    }

    .section-container {
      background-color: white;
      border-radius: 22upx;
      margin-left: 30upx;
      margin-right: 30upx;
      margin-top: 30upx;
    }

    .item-container {
      border-bottom: 2upx solid #F2F2F2;
      padding-top: 30upx;
      padding-bottom: 30upx;
      padding-left: 24upx;
      padding-right: 18upx;
      //.tag{
      //  background-color: #3073f6;
      //  color: #fff;
      //  font-family: PingFangSC-Regular;
      //  font-size: 20upx;
      //  margin-right: 10upx;
      //  margin-top: 6upx;
      //  padding: 2upx 10upx;
      //  border-radius: 10upx;
      //}
      .tag {
        background-color: #3073f6;
        color: #fff;
        font-size: 20upx;
        margin-right: 10upx;
        padding: 2upx 10upx;
        border-radius: 8upx;
      }
    }
  }

  .mp-search-input-container {
    margin: 30upx 30upx 10upx 30upx;
    height: 76upx;
    background-color: #f1f1f1;
    border-radius: 38upx;

    .search-icon {
      width: 26upx;
      height: 26upx;
      margin-left: 30upx;
      margin-right: 20upx;
    }

    .clear-icon {
      width: 32upx;
      height: 32upx;
      margin-right: 32upx;
    }

    .search-input {
      height: 76upx;
      color: #4B4F50;
      font-size: 28upx;
      flex: 1;
    }

    .search-btn {
      width: 144upx;
      height: 76upx;
      border-radius: 38upx;
      background-color: #3073F6;
      font-family: PingFangSC-Regular;
      font-size: 30upx;
      color: #fff;
    }
  }
}
</style>
